<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件传值</title>
    <script src="../vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                num:'1234',
                params:{
                    a: '123',
                    b: '456',
                    c: '789'
                }
            }
        },
        methods: {},
        template: `
          <div><test :content="num" :params="params"/></div>
        `
    });
    
    app.component("test",{
        data(){
            return {}
        },
        // props: ["content"],
        /**
         *  type:String,Number.Boolean,Array,Object,Function,Symbol
         *  required: 必填
         *  default: 默认值,也可以是一个函数
         *  validator: ()=>{}
         */
        /**
         * 单向数据流：子组件可以使用父组件的数据，但是不能修改父组件的数据。
         */
        // props: {
        //     // content: Number,
        //     content:{
        //         type:Number,
        //         required:true,
        //         default: function (){return 13},
        //         validator: function (value){
        //             return value < 1000;
        //         }
        //     }
        // },
        props: ['content','params'],
        template:`
            <div>{{content}}-{{params.a}}-{{params.b}}-{{params.c}}</div>
        `
    })
    const vm = app.mount("#app");
</script>
</body>
</html>